<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>多个选项卡标签切换</title>
<!--css引入-->
<link href="style/common.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<!--js引入-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/tab.js"></script>
</head>
<body>
<div style="width:1000px;margin: 10px auto;">

<div class="jyTable">
	<div class="clearfix">
		<ul class="title title1 left">
			<li class='cur'>选项1</li>
			<li>选项2</li>
			<li>选项3</li>
			<li>选项4</li>
		</ul>
		<div class="title_r">
			<a href="">
			<span class="more">MORE</span>
			<img src="imgs/more.png"/></a>
		</div>
		
	</div>
	<div class='zong'>
		<div class="list list1">
			<div class="tabCon">
				<div class="tab1_img_l">
					<img src="imgs/1.jpg"/>
				</div>
				<div class="tab1_img_r">
					<div class="tab1_img_rt">
						<div class="tab1_img_rtl">
							<img src="imgs/2.jpg"/>
						</div>
						<div class="tab1_img_rtr">
							<img src="imgs/3.jpg"/>
						</div>
					</div>
					<div class="tab1_img_rb">
						<div class="tab1_img_rbl">
							<img src="imgs/4.jpg"/>
						</div>
						<div class="tab1_img_rbr">
							<img src="imgs/5.jpg"/>
						</div>
					</div>
				</div>
			</div>
			<div class="tabCon">
				<div class="tab1_img_l">
					<img src="imgs/6.jpg"/>
				</div>
				<div class="tab1_img_r">
					<div class="tab1_img_rt">
						<div class="tab1_img_rtl">
							<img src="imgs/7.jpg"/>
						</div>
						<div class="tab1_img_rtr">
							<img src="imgs/8.jpg"/>
						</div>
					</div>
					<div class="tab1_img_rb">
						<div class="tab1_img_rbl">
							<img src="imgs/9.jpg"/>
						</div>
						<div class="tab1_img_rbr">
							<img src="imgs/10.jpg"/>
						</div>
					</div>
				</div>
			</div>
			<div class="tabCon">
				<div class="tab1_img_l">
					<img src="imgs/1.jpg"/>
				</div>
				<div class="tab1_img_r">
					<div class="tab1_img_rt">
						<div class="tab1_img_rtl">
							<img src="imgs/2.jpg"/>
						</div>
						<div class="tab1_img_rtr">
							<img src="imgs/3.jpg"/>
						</div>
					</div>
					<div class="tab1_img_rb">
						<div class="tab1_img_rbl">
							<img src="imgs/4.jpg"/>
						</div>
						<div class="tab1_img_rbr">
							<img src="imgs/5.jpg"/>
						</div>
					</div>
				</div>
			</div>
			<div class="tabCon">
				<div class="tab1_img_l">
					<img src="imgs/6.jpg"/>
				</div>
				<div class="tab1_img_r">
					<div class="tab1_img_rt">
						<div class="tab1_img_rtl">
							<img src="imgs/7.jpg"/>
						</div>
						<div class="tab1_img_rtr">
							<img src="imgs/8.jpg"/>
						</div>
					</div>
					<div class="tab1_img_rb">
						<div class="tab1_img_rbl">
							<img src="imgs/9.jpg"/>
						</div>
						<div class="tab1_img_rbr">
							<img src="imgs/10.jpg"/>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


</div>

<div style="text-align:center;margin:10px 0; ">
<p>说明：此模块可以拓展至多个（不限于4个）选项卡，并且每个选项卡里可以随意布局</p>
</div>
</body>
<script type="text/javascript" src="/public/js/footer.js"></script>
</html>